<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstrap-表单</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
</head>

<body>

    <!-- 水平排列 -->
    <form action="" class="form-horizontal">
        <!-- row 用 form-group代替 -->
        <!-- 栅格布局中，列用col代替 -->
        <div class="form-group">
            <!-- 通过col-lg类, 对划分栅格区域-->
            <!-- 通过对control-label类，对label添加对齐样式 -->
            <label for="" class="col-lg-2 control-label">用户名</label>
            <div class="col-lg-3">
                <!-- 通过form-control 为input添加样式 -->
                <input type="text" class="form-control">
            </div>
        </div>
        <div class="form-group">
            <label for="" class="col-lg-2 control-label">密码</label>
            <div class="col-lg-3">
                <input type="password" class="form-control">
            </div>
        </div>
        <div class="form-group">

            <div class="col-lg-4 col-lg-offset-2"><button class="btn btn-success">登录</button>

            </div>
    </form>

</html>